<script setup lang="ts">
import {message} from "ant-design-vue";

// 预算及出价方式
import {WxtBizCode} from "~/contentScripts/views/wxt/lib/wxtUtils";
import BudgetBiddingMethodTable
  from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/BudgetBiddingMethod/BudgetBiddingMethodTable.vue";
import WxtModal from "~/contentScripts/views/wxt/wxt-modal.vue";

const props = defineProps({
  rows: {
    type: Array,
    default: () => []
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: ''
  },
});
const emit = defineEmits([
  "refresh",
]);
const visible = ref(false);
const handle = () => {
  if (props.rows.length === 0) {
    message.error("请选择需要批量处理的数据！");
    return;
  }
  visible.value = true;
};
const close = () => {
  visible.value = false;
  emit('refresh');
};
</script>

<template>
  <div @click="handle" style="display: inline-block;">
    <slot>
      <a-button size="small" type="primary" ghost>预算及出价方式</a-button>
    </slot>
  </div>
  <wxt-modal v-model:visible="visible" width="90%" :style="{
    top: 'revert-layer',
  }" :title="`${rows.length>1?'批量':''}修改预算及出价方式`" @ok="close"
             @cancel="visible = false"
  >
    <BudgetBiddingMethodTable :is-show="visible" :rows="rows" :bizCode="bizCode" @close="close"/>
  </wxt-modal>
</template>

<style scoped>

</style>
